#bubbles {width:500px; height:500px; margin:50px auto 10px auto; position:relative; overflow:hidden;}
p {text-align:center; font:normal 14px/20px georgia, serif; padding:0; margin:0;}
#bubbles .sky {width:500px; height:220px; background:#69c;} 
#bubbles .grass {width:500px; height:290px; background:#6c9; position:relative; top:-10px;} 
#bubbles div {
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 1s;
-moz-animation-name: jiggle;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-webkit-animation-name: jiggle;
}

#bubbles .head {width:80px; height:80px; border:4px solid #877; overflow:hidden; position:absolute; left:290px; top:90px; z-index:20; background:#ffe8e8;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
}
#bubbles .head .hair-left {width:150px; height:150px; border:4px solid #877; overflow:hidden; position:absolute; left:-80px; top:-115px; background:#fc6;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
}
#bubbles .head .hair-right {width:150px; height:150px; border:4px solid #877; overflow:hidden; position:absolute; right:-135px; top:-40px; background:#fc6;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
}
#bubbles .head .eye-left {width:6px; height:6px; position:absolute; left:30px; top:40px; background:#000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-animation-duration:5s;
-moz-animation-name: jiggle, shut;
-webkit-animation-duration: 10s;
-webkit-animation-name: jiggle, shut;
}
#bubbles .head .eye-right {width:6px; height:6px; position:absolute; left:40px; top:45px; background:#000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-animation-duration:5s;
-moz-animation-name: jiggle, shut;
-webkit-animation-duration: 10s;
-webkit-animation-name: jiggle, shut;
}
#bubbles .head .mouth {width:12px; height:12px; position:absolute; left:20px; top:55px; background:#000;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-animation-duration:10s;
-moz-animation-name: jiggle, blow;
-webkit-animation-duration: 20s;
-webkit-animation-name: jiggle, blow;
}
#bubbles .body-left {width:30px; height: 90px; border:4px solid #877; border-right:0; background:#c30; position:absolute; left:295px; top:170px; z-index:10;
-moz-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}
#bubbles .body-right {width:30px; height: 90px; border:4px solid #877; border-left:0; background:#c30; position:absolute; left:310px; top:170px; z-index:10;
-moz-transform: skewX(-5deg);
-webkit-transform: skewX(-5deg);
-o-transform: skewX(-5deg);
transform: skewX(-5deg);
}
#bubbles .right-leg {width:10px; height:200px; border:4px solid #877; border-width:0 4px 4px 0; position:absolute; left:290px; top:260px;
-moz-transform: skew(-5deg,-15deg);
-webkit-transform: skew(-5deg,-15deg);
-o-transform: skew(-5deg,-15deg);
transform: skew(-5deg,-15deg);
}
#bubbles .left-leg {width:70px; height:100px; border:4px solid #877; border-width:0 0 4px 4px; position:absolute; left:320px; top:250px;
-moz-transform: skew(0deg,-25deg);
-webkit-transform: skew(0deg,-25deg);
-o-transform: skew(0deg,-25deg);
transform: skew(0deg,-25deg);
}
#bubbles .foot {width:0px; height:20px; border-left:4px solid #877; position:absolute; left:390px; top:335px;}

#bubbles .left-arm {width:90px; height:0px; border-top:4px solid #877; position:absolute; left:340px; top:215px;
-moz-transform: skew(0deg,45deg);
-webkit-transform: skew(0deg,45deg);
-o-transform: skew(0deg,45deg);
transform: skew(0deg,45deg);
}
#bubbles .right-arm {width:45px; height:40px; border:4px solid #877; border-width:0 0 4px 4px; position:absolute; left:265px; top:155px;
-moz-transform: skew(-10deg,-40deg);
-webkit-transform: skew(-10deg,-40deg);
-o-transform: skew(-10deg,-40deg);
transform: skew(-10deg,-40deg);
}
#bubbles .left-hand {width:15px; height:10px; border:3px solid #877; position:absolute; left:425px; top:260px; background:#ffe8e8;
-moz-radius: 15px / 10px;
-webkit-radius: 15px / 10px;
border-radius: 15px / 10px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#bubbles .right-hand {width:15px; height:10px; border:3px solid #877; position:absolute; left:260px; top:170px; background:#ffe8e8;
-moz-radius: 15px / 10px;
-webkit-radius: 15px / 10px;
border-radius: 15px / 10px;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#bubbles .hoop {width:15px; height:30px; border-left:5px solid #080; position:absolute; left:268px; top:140px; z-index:100; background:#69c;}

#bubbles .bubble {width:10px; height:10px; border:1px solid #aaa; opacity:1; position:absolute; left:270px; top:150px; z-index:50; background:#def;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:10s;
}
#bubbles .bubble:after {content:""; display:block; width:25%; height:25%; position:absolute; left:25%; top:25%; background:#fff;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
box-shadow: 0px 0px 12px rgba(255, 255, 255, 0.4); 
-moz-box-shadow: 0px 0px 12px rgba(255, 255, 255, 0.4); 
-webkit-box-shadow: 0px 0px 12px rgba(255, 255, 255, 0.4);
}
#bubbles .b1 {
-moz-animation-name: bubble1;
-webkit-animation-name: bubble1;
}
#bubbles .b2 {
-moz-animation-name: bubble2;
-webkit-animation-name: bubble2;
}
#bubbles .b3 {
-moz-animation-name: bubble3;
-webkit-animation-name: bubble3;
}
#bubbles .b4 {
-moz-animation-name: bubble4;
-webkit-animation-name: bubble4;
}
#bubbles .b5 {
-moz-animation-name: bubble5;
-webkit-animation-name: bubble5;
}

@-moz-keyframes shut {
0% {opacity:1;}
95% {opacity:1;}
96% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes jiggle {
0% {margin-left:2px;}
25% {margin-top:-1px;}
50% {margin-left:-2px;}
75% {margin-top:1px;}
}
@-moz-keyframes blow {
0% {width:12px; height:12px;}
10% {width:3px; height:3px; left:23px; top:60px;}
11% {width:12px; height:12px; left:20px; top:55px;}
100% {width:12px; height:12px; left:20px; top:55px;}
}

@-moz-keyframes bubble1 {
5% {width:100px; height:100px; -moz-border-radius: 100px; margin-left:-110px; margin-top:-50px; opacity:0.5}
10% {width:100px; height:100px; -moz-border-radius: 100px; left:115px; top:150px; opacity:0.5}
20% {width:100px; height:100px; -moz-border-radius: 100px; left:160px; top:250px; opacity:0.4}
40% {width:100px; height:100px; -moz-border-radius: 100px; left:200px; top:300px; opacity:0.4}
60% {width:100px; height:100px; -moz-border-radius: 100px; left:350px; top:200px; opacity:0.3}
80% {width:100px; height:100px; -moz-border-radius: 100px; left:400px; top:150px; opacity:0.3}
100% {width:100px; height:100px; -moz-border-radius: 100px; left:400px; top:150px; opacity:0;}
}

@-moz-keyframes bubble2 {
10% {width:90px; height:90px; -moz-border-radius: 90px; margin-left:-100px; margin-top:-40px; opacity:0.5}
25% {width:90px; height:90px; -moz-border-radius: 90px; left:130px; top:100px; opacity:0.4}
40% {width:90px; height:90px; -moz-border-radius: 90px; left:120px; top:50px; opacity:0.4}
60% {width:90px; height:90px; -moz-border-radius: 90px; left:250px; top:30px; opacity:0.3}
80% {width:90px; height:90px; -moz-border-radius: 90px; left:350px; top:40px; opacity:0.3}
100% {width:90px; height:90px; -moz-border-radius: 90px; left:400px; top:050px; opacity:0;}
}
@-moz-keyframes bubble3 {
15% {width:80px; height:80px; -moz-border-radius: 80px; margin-left:-90px; margin-top:-30px; opacity:0.5}
30% {width:80px; height:80px; -moz-border-radius: 80px; left:140px; top:200px; opacity:0.4}
40% {width:80px; height:80px; -moz-border-radius: 80px; left:150px; top:250px; opacity:0.4}
60% {width:80px; height:80px; -moz-border-radius: 80px; left:130px; top:300px; opacity:0.3}
80% {width:80px; height:80px; -moz-border-radius: 80px; left:250px; top:350px; opacity:0.3}
100% {width:80px; height:80px; -moz-border-radius: 80px; left:300px; top:300px; opacity:0;}
}
@-moz-keyframes bubble4 {
20% {width:70px; height:70px; -moz-border-radius: 70px; margin-left:-80px; margin-top:-20px; opacity:0.5}
35% {width:70px; height:70px; -moz-border-radius: 70px; left:150px; top:120px; opacity:0.4}
40% {width:70px; height:70px; -moz-border-radius: 70px; left:170px; top:130px; opacity:0.4}
60% {width:70px; height:70px; -moz-border-radius: 70px; left:180px; top:140px; opacity:0.3}
80% {width:70px; height:70px; -moz-border-radius: 70px; left:170px; top:150px; opacity:0.3}
100% {width:70px; height:70px; -moz-border-radius: 70px; left:150px; top:160px; opacity:0;}
}
@-moz-keyframes bubble5 {
25% {width:60px; height:60px; -moz-border-radius: 60px; margin-left:-30px; margin-top:-10px; opacity:0.5}
40% {width:60px; height:60px; -moz-border-radius: 60px; left:160px; top:100px; opacity:0.4}
50% {width:60px; height:60px; -moz-border-radius: 60px; left:130px; top:90px; opacity:0.4}
60% {width:60px; height:60px; -moz-border-radius: 60px; left:120px; top:80px; opacity:0.3}
80% {width:60px; height:60px; -moz-border-radius: 60px; left:110px; top:70px; opacity:0.3}
100% {width:60px; height:60px; -moz-border-radius: 60px; left:120px; top:80px; opacity:0;}
}

@-webkit-keyframes shut {
0% {opacity:1;}
95% {opacity:1;}
96% {opacity:0;}
100% {opacity:0;}
}

@-webkit-keyframes jiggle {
0% {margin-left:-2px;}
25% {margin-top:-2px;}
50% {margin-left:2px;}
75% {margin-top:2px;}
100% {margin-top:0; margin-left:0;}
}

@-webkit-keyframes blow {
0% {width:12px; height:12px;}
10% {width:3px; height:3px; left:23px; top:60px;}
11% {width:12px; height:12px; left:20px; top:55px; }
100% {width:12px; height:12px; left:20px; top:55px; }
}

@-webkit-keyframes bubble1 {
0% {width:10px; height:10px;}
5% {width:100px; height:100px; -webkit-border-radius: 100px; margin-left:-110px; margin-top:-50px; opacity:0.5}
10% {width:100px; height:100px; -webkit-border-radius: 100px; left:115px; top:150px; opacity:0.5}
20% {width:100px; height:100px; -webkit-border-radius: 100px; left:160px; top:250px; opacity:0.4}
40% {width:100px; height:100px; -webkit-border-radius: 100px; left:200px; top:300px; opacity:0.4}
60% {width:100px; height:100px; -webkit-border-radius: 100px; left:350px; top:200px; opacity:0.3}
80% {width:100px; height:100px; -webkit-border-radius: 100px; left:400px; top:150px; opacity:0.3}
100% {width:100px; height:100px; -webkit-border-radius: 100px; left:400px; top:150px; opacity:0;}
}

@-webkit-keyframes bubble2 {
0% {width:10px; height:10px;}
5% {width:10px; height:10px;}
10% {width:90px; height:90px; -webkit-border-radius: 90px; margin-left:-100px; margin-top:-40px; opacity:0.5}
25% {width:90px; height:90px; -webkit-border-radius: 90px; left:130px; top:100px; opacity:0.4}
40% {width:90px; height:90px; -webkit-border-radius: 90px; left:120px; top:50px; opacity:0.4}
60% {width:90px; height:90px; -webkit-border-radius: 90px; left:250px; top:30px; opacity:0.3}
80% {width:90px; height:90px; -webkit-border-radius: 90px; left:350px; top:40px; opacity:0.3}
100% {width:90px; height:90px; -webkit-border-radius: 90px; left:400px; top:050px; opacity:0;}
}
@-webkit-keyframes bubble3 {
0% {width:10px; height:10px;}
10% {width:10px; height:10px;}
15% {width:80px; height:80px; -webkit-border-radius: 80px; margin-left:-90px; margin-top:-30px; opacity:0.5}
30% {width:80px; height:80px; -webkit-border-radius: 80px; left:140px; top:200px; opacity:0.4}
40% {width:80px; height:80px; -webkit-border-radius: 80px; left:150px; top:250px; opacity:0.4}
60% {width:80px; height:80px; -webkit-border-radius: 80px; left:130px; top:300px; opacity:0.3}
80% {width:80px; height:80px; -webkit-border-radius: 80px; left:250px; top:350px; opacity:0.3}
100% {width:80px; height:80px; -webkit-border-radius: 80px; left:300px; top:300px; opacity:0;}
}
@-webkit-keyframes bubble4 {
0% {width:10px; height:10px;}
15% {width:10px; height:10px;}
20% {width:70px; height:70px; -webkit-border-radius: 70px; margin-left:-80px; margin-top:-20px; opacity:0.5}
35% {width:70px; height:70px; -webkit-border-radius: 70px; left:150px; top:120px; opacity:0.4}
40% {width:70px; height:70px; -webkit-border-radius: 70px; left:170px; top:130px; opacity:0.4}
60% {width:70px; height:70px; -webkit-border-radius: 70px; left:180px; top:140px; opacity:0.3}
80% {width:70px; height:70px; -webkit-border-radius: 70px; left:170px; top:150px; opacity:0.3}
100% {width:70px; height:70px; -webkit-border-radius: 70px; left:150px; top:160px; opacity:0;}
}
@-webkit-keyframes bubble5 {
0% {width:10px; height:10px;}
20% {width:10px; height:10px;}
25% {width:60px; height:60px; -webkit-border-radius: 60px; margin-left:-70px; margin-top:-15px; opacity:0.5}
40% {width:60px; height:60px; -webkit-border-radius: 60px; left:160px; top:100px; opacity:0.4}
50% {width:60px; height:60px; -webkit-border-radius: 60px; left:130px; top:90px; opacity:0.4}
60% {width:60px; height:60px; -webkit-border-radius: 60px; left:120px; top:80px; opacity:0.3}
80% {width:60px; height:60px; -webkit-border-radius: 60px; left:110px; top:70px; opacity:0.3}
100% {width:60px; height:60px; -webkit-border-radius: 60px; left:120px; top:80px; opacity:0;}
}
